<template>
  <div>
    <el-row
      type="flex"
      :gutter="20"
      style="padding-left: 1vw"
    >
      <el-col :span="23">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 2vh 0 0 2vw;"
        >
        <el-row>
          <el-col :span="8">
              <el-form-item>
                <div
                  slot="label"
                  style="color:white; font-size: 20px;"
                >
                  起始时间：
                </div>
                <el-date-picker
                     v-model="startTime"
                     type="datetime"
                     style='width: 300px;'
                     value-format="yyyy-MM-dd HH:mm:ss"
                     placeholder="选择起始时间">
                   </el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item>
                <div
                  slot="label"
                  style="color:white; font-size: 20px;"
                >
                  终止时间：
                </div>
                <el-date-picker
                     v-model="endTime"
                     type="datetime"
                     style='width: 300px;'
                     value-format="yyyy-MM-dd HH:mm:ss"
                     placeholder="选择终止时间">
                   </el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item>
                <div
                  slot="label"
                  style="color:white; font-size: 20px;"
                >
                  机组名称：
                </div>
                <el-select placeholder="请选择机组" style='width: 300px;' v-model="jizuname">
                     <el-option
                           v-for="item in jizuList"
                           :key="item"
                           :label="item"
                           :value="item">
                      </el-option>
                </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
              <el-form-item>
                <div
                  slot="label"
                  style="color:white; font-size: 20px;"
                >
                  告警描述：
                </div>
                <el-input placeholder="请输入告警描述" v-model="descriptor" style='width: 300px;'/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item>
                <div
                  slot="label"
                  style="color:white; font-size: 20px"
                >
                  告警等级：
                </div>
                <el-select placeholder="请选择告警等级" style='width: 300px;' v-model="alarmClass">
                     <el-option
                           v-for="item in alarmClasses"
                           :key="item"
                           :label="item.label"
                           :value="item.value">
                      </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-button
                class="el-blue-button"
                @click="search()"
              >
                <i class="el-icon-search" /> &nbsp;查询
              </el-button>
              <el-button
                class="el-blue-button"
                @click="reset()"
              >
                <i class="el-icon-refresh-right" />&nbsp;重置
              </el-button>
          </el-col>
        </el-row>
        </el-form>
      </el-col>
    </el-row>

    <hr style="border-bottom: none;border-color: #8c939d">
    <br/>
<el-row style="margin: 0 3vw">

    <el-table
      :data="abnormalList"
      border
      style="width: 100%;padding:2vh "
    >
      <el-table-column
        prop="id"
        label="id"
        width="200"
        align="center"
      />
      <el-table-column
        prop="tag_name"
        label="点位名称"
        align="center"
      />
      <el-table-column
        prop="descriptor"
        label="告警描述"
        align="center"
      />
      <el-table-column

        label="告警等级"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ getAlarmClass(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="告警时间"
        align="center"
      />
    </el-table>
      <el-pagination
        style="margin-top: 10px;float: right"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :current-page.sync="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
      />
</el-row>
  </div>
</template>

<script>
import request from '../../network/request'
export default {
  name: 'Index',
  data () {
    return {
      formLabelWidth: '120px',
      // 搜索值
      startTime: null,
      endTime: null,
      descriptor: null,
      jizuname: null,
      alarmClass: null,
      total: 0,
      currentPage: 1,
      pageSize: 8,
      jizuList: [],
      alarmClasses: [{
        value: 1,
        label: '一级告警'
      },
      {
        value: 2,
        label: '二级告警'
      }],
      abnormalList: [
      ]

    }
  },

  created () {
    request({
      method: 'GET',
      url: '/abDataOp/conditionSelect',
      params: {
        pageNum: this.currentPage
      }
    }).then(r => {
      // console.log(r.data)
      this.abnormalList = r.data.list
      this.total = r.data.total
      console.log(this.abnormalList)
    })

    // 机组名列表
    request({
      method: 'GET',
      url: '/abDataOp/getjizuName'
    }).then(r => {
      console.log(r.data)
      this.jizuList = r.data
    })
  },

  mounted () {

  },
  methods: {
    reset () {
      this.startTime = null
      this.endTime = null
      this.jizuname = null
      this.descriptor = null
      this.alarmClass = null
    },
    handleCurrentChange (val) {
      this.currentPage = val
      if (this.jizuname === '') {
        this.jizuname = null
      }
      if (this.descriptor === '') {
        this.descriptor = null
      }
      if (this.alarmClass === '') {
        this.alarmClass = null
      }
      request({
        method: 'GET',
        url: '/abDataOp/conditionSelect',
        params: {
          pageNum: this.currentPage,
          startTime: this.startTime,
          endTime: this.endTime,
          descriptor: this.descriptor,
          jizuname: this.jizuname,
          alarmClass: this.alarmClass
        }
      }).then(r => {
        // console.log(r.data)
        this.abnormalList = r.data.list
        this.total = r.data.total
      })
    },
    updateDialog () {
      this.dialogVisibleUpdate = true
    },
    cancelUpdate () {
      this.dialogVisibleUpdate = false
    },

    // 搜索按钮对应
    search () {
      this.containsOld = this.searchContains
      this.currentPage = 1
      if (this.jizuname === '') {
        this.jizuname = null
      }
      if (this.descriptor === '') {
        this.descriptor = null
      }
      if (this.alarmClass === '') {
        this.alarmClass = null
      }
      request({
        method: 'GET',
        url: '/abDataOp/conditionSelect',
        params: {
          pageNum: this.currentPage,
          startTime: this.startTime,
          endTime: this.endTime,
          descriptor: this.descriptor,
          jizuname: this.jizuname,
          alarmClass: this.alarmClass
        }
      }).then(r => {
        this.abnormalList = r.data.list
        this.total = r.data.total
      })
    },

    // 处理表格中告警等级，转换成文字
    getAlarmClass (item) {
      if (item.alarm_class === 1) {
        return ('一级告警')
      } else if (item.alarm_class === 2) { return ('二级告警') }
    }

  }
}
</script>

<style lang="scss" scoped>

  .demo-form-inline {
    padding-top: 0.8vh;
  }
  .el-table{
    font-size: 20px;
  }
  >>>td .cell {
    /*margin-top: 3vh;*/
    margin: 1.8% 0;
  }
  .pagination {
    padding-top: 100vh;
    text-align: center;
  }
  >>>.el-pagination__total, >>>.el-pagination__jump{
    color: white;
  }
  >>> .el-pagination span {
    font-size: 18px;
  }
  >>>.number{
    color: #dddddd;
  }
  .ruleform-content{
    padding: 20px;
    display: flex;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
  }
.el-dialog{
      height:30vh;
  }

</style>
